<template>
  <div class="model_container_left">
    <el-tabs v-model="activeName">
      <el-tab-pane label="猫" name="cat">
        <span slot="label">猫({{ catImages.length }})</span>
        <div class="card_images">
          <div class="image-gallery">
            <div v-for="(img, index) in catImages" :key="index" class="image-item" @click="$emit('click',{
              category: 'cat',
              index:img.i,
                src:img.src
            })">
              <el-image :src="img.src" :alt="img.alt" class="gallery-image"/>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="狗" name="dog">
        <span slot="label">狗({{ dogImages.length }})</span>
        <div class="card_images">
          <div class="image-gallery">
            <div v-for="(img, index) in dogImages" :key="index" class="image-item" @click="$emit('click',{
              category: 'dog',
              index:img.i,
              src:img.src
            })">
              <el-image :src="img.src" :alt="img.alt" class="gallery-image"/>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  filters: {},
  props: {},
  components: {},
  computed: {},
  data () {
    return {
      catImages: [],
      dogImages: [],
      activeName: 'cat'
    }
  },
  created () {
  },
  mounted () {
    this.loadImagesForDisplay()
  },
  methods: {
    async loadImagesForDisplay () {
      const categories = ['cat', 'dog']
      for (const category of categories) {
        for (let i = 1000; i < 1500; i++) {
          try {
            const imgPath = require(`@/views/demo/page1/assets/image/${category}/${category}.${i}.jpg`)
            const img = {
              src: imgPath.default || imgPath,
              alt: `${category} ${i}`,
              label: category === 'cat' ? '猫' : '狗',
              i
            }
            category === 'cat' ? this.catImages.push(img) : this.dogImages.push(img)
          } catch (error) {
            console.error(`加载图片失败: ${category}.${i}.jpg`, error)
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.card_images {
  overflow-y: scroll;
  height: 50vh;
}

.image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.image-item {
  width: 150px;
  text-align: center;

  &:hover {
    cursor: pointer;
  }
}

.gallery-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 4px;
}

.image-label {
  margin-top: 5px;
  font-size: 14px;
  color: #666;
}

</style>
